import styled from 'styled-components';

export const RightPage = styled.div`
  height: 100%;
  display: flex;
  flex-direction: column;
  gap: 0.1rem;
`;

export const RightTopBox = styled.div`
  flex: 0 0 40%;
  position: relative;
  background: linear-gradient(135deg, 
    rgba(0, 102, 255, 0.08) 0%, 
    rgba(0, 204, 255, 0.05) 100%);
  border: 1px solid rgba(0, 153, 255, 0.3);
  border-radius: 8px;
  backdrop-filter: blur(10px);
  overflow: hidden;
  
  /* 容器内部边框发光效果 */
  &::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    border-radius: 8px;
    padding: 1px;
    background: linear-gradient(135deg, 
      rgba(0, 255, 255, 0.4) 0%, 
      rgba(0, 153, 255, 0.2) 50%, 
      rgba(0, 255, 255, 0.4) 100%);
    mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
    mask-composite: exclude;
    z-index: -1;
  }

  .right-top-borderBox {
    width: 100%;
    height: 100%;
  }

  .right-top {
    padding: 0.03rem; /* 极大减少内边距 */
    height: 100%;
    display: flex;
    flex-direction: column;

    .title-dis {
      display: flex;
      justify-content: space-between;
      margin: 0.02rem 0; /* 极大减少边距 */
      font-size: 0.18rem; /* 大幅增加标题字体 */
      color: rgba(255, 255, 255, 0.9);
      font-weight: bold; /* 增加字体粗细 */

      .title-dis-keyword {
        color: #00ffff;
        font-weight: bold;
        text-shadow: 0 0 10px rgba(0, 255, 255, 0.8);
        margin-left: 0.08rem;
      }
    }

    /* 图表容器 */
    > div:last-child {
      flex: 1;
      min-height: 0;
    }
  }

  /* 悬停效果 */
  &:hover {
    border-color: rgba(0, 255, 255, 0.6);
    box-shadow: 0 0 20px rgba(0, 255, 255, 0.2);
    transform: translateY(-2px);
    transition: all 0.3s ease;
  }
`;

export const RightBottomBox = styled.div`
  flex: 1;
  position: relative;
  background: linear-gradient(135deg, 
    rgba(0, 102, 255, 0.08) 0%, 
    rgba(0, 204, 255, 0.05) 100%);
  border: 1px solid rgba(0, 153, 255, 0.3);
  border-radius: 8px;
  backdrop-filter: blur(10px);
  overflow: hidden;
  
  /* 容器内部边框发光效果 */
  &::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    border-radius: 8px;
    padding: 1px;
    background: linear-gradient(135deg, 
      rgba(0, 255, 255, 0.4) 0%, 
      rgba(0, 153, 255, 0.2) 50%, 
      rgba(0, 255, 255, 0.4) 100%);
    mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
    mask-composite: exclude;
    z-index: -1;
  }

  .right-bottom-borderBox {
    width: 100%;
    height: 100%;
  }

  .right-bottom {
    padding: 0.03rem; /* 极大减少内边距 */
    height: 100%;
    display: flex;
    flex-direction: column;

    .title-dis {
      display: flex;
      justify-content: space-between;
      margin: 0.02rem 0; /* 极大减少边距 */
      font-size: 0.18rem; /* 大幅增加标题字体 */
      color: rgba(255, 255, 255, 0.9);
      font-weight: bold; /* 增加字体粗细 */

      .title-dis-keyword {
        color: #00ffff;
        font-weight: bold;
        text-shadow: 0 0 10px rgba(0, 255, 255, 0.8);
        margin-left: 0.08rem;
      }
    }

    /* 图表容器 */
    > div:last-child {
      flex: 1;
      min-height: 0;
    }
  }

  /* 悬停效果 */
  &:hover {
    border-color: rgba(0, 255, 255, 0.6);
    box-shadow: 0 0 20px rgba(0, 255, 255, 0.2);
    transform: translateY(-2px);
    transition: all 0.3s ease;
  }
`;
